import React, {Component} from 'react';
import PropTypes from 'prop-types'


class Child extends Component {

  // state = {}


  // 静态属性 ==>
  // 定义在类自身的属性
  static propTypes = {
    // 如果类型不对，则报出明确错误，便于分析错误原因
    color: PropTypes.string,
    age: PropTypes.number.isRequired,
  }

  // 定义组件的默认值，如果父组件不传递值过来，则使用子组件自己默认值
  static defaultProps = {
    pageSize: 20
  }

  render() {
    console.log(this.props)
    return (
      <div style={{color: this.props.color}}>
        你好~~~~
      </div>
    );
  }

}

// Child.defaultProps = {
//   pageSize: 10
// }

// 静态属性
// Child.propTypes = {
//   // 约定colors属性为array类型
//   // 如果类型不对，则报出明确错误，便于分析错误原因
//   color: PropTypes.string,
//   age: PropTypes.number.isRequired,
//   msg: PropTypes.shape({
//     color: PropTypes.object,
//     arr: PropTypes.array,
//     fn: PropTypes.func.isRequired
//   })
// }


class Index extends Component {
  render() {
    return (
      <div>
        <Child color={'red'} age={18}/>
      </div>
    );
  }
}

export default Index;
